<template>
    <view>
        <form @submit="savepubinfo" report-submit>
            <view class="container">
                <view class="main">
                    <view class="header">兼职报名</view>
                    <view class="title">个人基本信息</view>
                    <view class="list">
                        <view class="item">
                            <view class="name">
                                姓 名
                                <text>*</text>
                            </view>
                            <view class="selectitem">
                                <input :value="noteinfo.name ? noteinfo.name : ''" type="text" name="name" placeholder="请输入姓名" cursor-spacing="140" />
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">
                                性 别
                                <text>*</text>
                            </view>
                            <view class="selectitem">
                                <radio-group class="radio-group" @change="radioChange">
                                    <label class="radio">
                                        <radio value="1" :checked="noteinfo.sex == 1 ? 'checked' : ''" />
                                        男
                                    </label>
                                    <label class="radio">
                                        <radio value="0" :checked="noteinfo.sex == 0 ? 'checked' : ''" />
                                        女
                                    </label>
                                </radio-group>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">
                                手机号码
                                <text>*</text>
                            </view>
                            <view class="selectitem">
                                <input type="text" :value="noteinfo.tel ? noteinfo.tel : ''" name="tel" placeholder="请输入手机号码" cursor-spacing="140" />
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="weixinmao-float">
                <view class="weixinmao-foot">
                    <button class="footer" formType="submit">立即报名</button>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
import { Baoming } from '../../model/baoming-model.js';
var baoming = new Baoming();
export default {
    data() {
        return {
            jobid: 0,
            imgs1: [],
            show1: '',
            arealist: '',
            areaindexid: '',
            jobcate: '',
            jobcateindex: '',
            currentstatus: '',
            currentstatusindex: '',
            express: '',
            expressindex: '',
            birthday: '',
            birthdayindex: '',
            education: '',
            educationindex: '',
            worktype: '',
            worktypeindex: '',
            money: '',
            moneyindex: '',
            imgs2: '',
            show2: '',

            noteinfo: {
                name: false,
                sex: 0,
                tel: false
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        uni.setNavigationBarTitle({
            title: '我的简历'
        });
        var that = this;
        that.jobid = options.id;
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        initpage: function () {
            var that = this;
            var city;
            city = uni.getStorageSync('city');
        },

        savepubinfo: function (e) {
            var that = this;
            var name = e.detail.value.name;
            var sex = that.sex;
            var tel = e.detail.value.tel;
            var jobid = that.jobid;
            if (name == '') {
                uni.showModal({
                    title: '提示',
                    content: '请输入姓名',
                    showCancel: false
                });
                return;
            }
            if (tel == '') {
                uni.showModal({
                    title: '提示',
                    content: '请填写手机号',
                    showCancel: false
                });
                return;
            } else {
                if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel)) {
                    uni.showModal({
                        title: '提示',
                        content: '手机号有误,请重新填写',
                        showCancel: false
                    });
                    return;
                }
            }
            var cityinfo = uni.getStorageSync('cityinfo');
            var params = {
                cityid: cityinfo.id,
                name: name,
                sex: sex,
                tel: tel,
                jobid: jobid
            };
            baoming.Savebaoming((data) => {
                uni.showModal({
                    title: '提示',
                    content: data.msg,
                    showCancel: false
                });
                return;
            }, params);
        },

        deleteImg1: function (e) {
            var that = this;
            var index = e.currentTarget.dataset.index;
            that.logoimglist = [];
            that.setData({
                imgs1: [],
                show1: 'none'
            });
            console.log(index);
        },

        radioChange: function (e) {
            this.sex = e.detail.value;
        },

        bindAreaChange: function (e) {
            var arealist = this.arealist;
            if (arealist) {
                this.areaid = arealist[e.detail.value].id;
                this.areaindexid = e.detail.value;
            }
            this.setData({
                arealist: arealist,
                areaindexid: e.detail.value
            });
        },

        bindJobcateChange: function (e) {
            var jobcate = this.jobcate;
            if (jobcate) {
                this.jobcateindex = e.detail.value;
                this.jobcateid = jobcate[e.detail.value].id;
            }
            this.setData({
                jobcate: jobcate,
                jobcateindex: e.detail.value
            });
        },

        bindCurrentChange: function (e) {
            var currentstatus = this.currentstatus;
            if (currentstatus) {
                this.currentstatusindex = e.detail.value;
                //   this.data.currentid = current[e.detail.value].id;
                this.currentstatusname = currentstatus[e.detail.value];
            }
            this.setData({
                currentstatus: currentstatus,
                currentstatusindex: e.detail.value
            });
        },

        bindExpressChange: function (e) {
            var express = this.express;
            if (express) {
                this.expressindex = e.detail.value;
                this.expressname = express[e.detail.value];
            }
            console.log(this.expressname);
            this.setData({
                express: express,
                expressindex: e.detail.value
            });
        },

        bindBirthdayChange: function (e) {
            var birthday = this.birthday;
            if (birthday) {
                this.birthdayindex = e.detail.value;
                this.birthdayname = birthday[e.detail.value];
            }
            this.setData({
                birthday: birthday,
                birthdayindex: e.detail.value
            });
        },

        bindEducationChange: function (e) {
            var education = this.education;
            if (education) {
                this.educationindex = e.detail.value;
                this.educationname = education[e.detail.value];
            }
            console.log(this.educationname);
            this.setData({
                education: education,
                educationindex: e.detail.value
            });
        },

        bindWorktypeChange: function (e) {
            var worktype = this.worktype;
            if (worktype) {
                this.worktypeindex = e.detail.value;
                this.worktypename = worktype[e.detail.value];
            }
            console.log(this.worktypename);
            this.setData({
                worktype: worktype,
                worktypeindex: e.detail.value
            });
        },

        bindMoneyChange: function (e) {
            var money = this.money;
            if (money) {
                this.moneyindex = e.detail.value;
                this.moneyname = money[e.detail.value];
            }
            console.log(this.moneyname);
            this.setData({
                money: money,
                moneyindex: e.detail.value
            });
        },

        bindCurrentstatusChange: function (e) {
            var currentstatus = this.currentstatus;
            if (currentstatus) {
                this.currentstatusindex = e.detail.value;
                this.currentstatusname = currentstatus[e.detail.value];
            }
            console.log(this.currentstatusname);
            this.setData({
                currentstatus: currentstatus,
                currentstatusindex: e.detail.value
            });
        },

        chooseImg: function (e) {
            var that = this;
            var count = 9;
            var id = parseInt(e.currentTarget.dataset.id);
            if (id == 1) {
                count = 1;
            }
            uni.chooseImage({
                count: count,
                // 默认9
                sizeType: ['compressed'],
                // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'],
                // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

                    var tempFilePaths = res.tempFilePaths;
                    var imgs = [];
                    if (id == 1) {
                        that.logoimglist = [];
                        that.setData({
                            imgs1: tempFilePaths,
                            show1: 'block'
                        });
                    } else if (id == 2) {
                        that.imagelist = [];
                        that.imgs2 = tempFilePaths;
                        that.setData({
                            imgs2: tempFilePaths,
                            show2: 'block'
                        });
                    }

                    // var tempFilePaths = that.data.imgs

                    for (var s = 0; s < tempFilePaths.length; s++) {
                        console.log(tempFilePaths[s]);
                        that.uploadimg(tempFilePaths[s], id);
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        uploadimg: function (path, id) {
            //var uploadurl = app.util.geturl({ 'url': 'entry/wxapp/upload' });
            // var id = id;
            uni.showToast({
                icon: 'loading',
                title: '正在上传'
            });
            var that = this;
            var params = {
                path: path
            };
            note.uploadimg((data) => {
                console.log(data);
                if (id == 1) {
                    console.log(data.imgpath);
                    that.logoimglist.push(data.imgpath);
                    console.log(that.logoimglist);
                } else if (id == 2) {
                    that.imagelist.push(data.imgpath);
                }
            }, params);
        }
    }
};
</script>
<style>
/* pages/baoming/index.wxss */
.container {
    background-color: #f5f5f5;
    min-height: 100%;
    margin-bottom: 20%;
}
.container .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container .main .header {
    width: 730rpx;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    font-size: 0.9rem;
    padding-left: 20rpx;
    color: #000;
    text-align: center;
    background: #fff;
}
.container .main .title {
    width: 730rpx;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    font-size: 0.9rem;
    padding-left: 20rpx;
    color: #888888;
}

.container .main .list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
}

::-webkit-input-placeholder {
    color: #000;
    font-size: 18px;
}

.container .main .list .item {
    width: 700rpx;
    border-bottom: 1rpx solid #f5f5f5;
    align-self: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    /*
flex-direction: row;
justify-content:space-between;
*/
}
.container .main .list .item .name {
    font-size: 14px;
    color: #a2a2a2;
}
.container .main .list .item .name text {
    color: red;
}
.container .main .list .item .selectitem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #808080;
    font-size: 14px;
    height: 100rpx;
    line-height: 100rpx;
    background: #fff;
}

.container .main .list .item .selectitem input {
    height: 100rpx;
    width: 740rpx;
    color: #000;
    font-size: 18px;
}

.container .main .list .item .selectitem > image {
    width: 30rpx;
    height: 30rpx;
    align-self: center;
}
.container .main .checklist {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    background: #fff;
    flex-wrap: wrap;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    padding-left: 20rpx;
}
.radio {
    font-size: 18px;
}
.picker {
    font-size: 18px;
}
.container .main .checklist checkbox-group {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.container .main .checklist .checkitem {
    font-size: 0.7rem;
    width: 240rpx;
    margin-top: 10rpx;
}

.container .doagree {
    font-size: 0.7rem;
    margin-left: 50rpx;
    margin-top: 40rpx;
    margin-bottom: 280rpx;
    padding-bottom: 50rpx;
}

.container .main .imglist {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #fff;
}

.container .main .imglist .imgitem {
    width: 200rpx;
    border: 1rpx dotted #f5f5f5;
    position: relative;
}
.container .main .imglist .imgitem image {
    width: 200rpx;
    height: 200rpx;
}

.sum {
    position: absolute;
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    background: #3274e5;
    top: -10rpx;
    left: 150rpx;
    color: #fff;
    z-index: 1000;
    font-size: 0.7rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.sum text {
    font-size: 0.7rem;
    align-self: center;
}

.weixinmao-msg {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.weixinmao-content {
    width: 720rpx;
    height: 450rpx;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map {
    height: 850rpx;
}
.mapbtn {
    background: #3274e5;
    color: #fff;
    font-size: 1rem;
    width: 400rpx;
}
.weixinmao-content .title {
    border-bottom: 1rpx solid #e5e5e5;
    width: 100%;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 0.8rem;
    background: #3274e5;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.weixinmao-content .title view:nth-child(1) {
    width: 30%;
}

.weixinmao-content .title view:nth-child(2) {
    width: 40%;
}

.weixinmao-content .title view:nth-child(3) {
    width: 30%;
}

.weixinmao-content .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.weixinmao-content .list .item {
    width: 100%;
    align-self: center;
    text-align: center;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.weixinmao-foot {
    display: flex;
    justify-content: center;
    flex-direction: row;

    z-index: 999;

    width: 100%;
}

.weixinmao-foot view {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
    width: 50%;
    border-radius: 0rpx;
    padding-left: 30rpx;
    background: #e64340;
}
.weixinmao-foot button {
    background: #07b56d;
    width: 100%;
    color: #fff;
    border-radius: 0rpx;
    font-size: 1rem;
}

.ismaster {
    color: red;
    font-weight: bold;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 30rpx;
    align-self: center;
}

.selectitem textarea {
    width: 100%;
}

.masterbtn {
    margin-top: 100rpx;
    width: 300rpx;
    background: #3274e5;
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 5rpx;
    text-align: center;
    font-size: 0.7rem;
}

.weixinmao-msg_show {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.weixinmao-content_show {
    width: 550rpx;
    height: 600rpx;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weixinmao-content_show .title {
    border-bottom: 1rpx solid #e5e5e5;
    width: 100%;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 0.8rem;
    background: #3274e5;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.weixinmao-content_show .title view:nth-child(1) {
    width: 30%;
}

.weixinmao-content_show .title view:nth-child(2) {
    width: 40%;
}

.weixinmao-content_show .title view:nth-child(3) {
    width: 30%;
}

.weixinmao-content_show .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.weixinmao-content_show .list .item {
    width: 100%;
    align-self: center;
    text-align: center;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.heaerpic {
    width: 380rpx;
    height: 250rpx;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.heaerpic image {
    width: 160rpx;
    height: 160rpx;
    border: 7rpx solid #fff;
    border-radius: 160rpx;
}
.heaerpic view {
    height: 80rpx;
    line-height: 80rpx;
    width: 380rpx;
    text-align: center;
    font-size: 0.8rem;
}

.ql-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 1.5;
    overflow: auto;
    padding: 10px 10px 20px 10px;
    border: 1px solid #ececec;
}

.ql-active {
    color: #22c704;
}

.iconfont {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 20px;
}

.toolbar {
    box-sizing: border-box;
    padding: 0 10px;
    height: 50px;
    width: 100%;
    position: fixed;
    left: 0;
    right: 100%;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-left: none;
    border-right: none;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.uploadlist {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50rpx;

    background: #fff;
}
.uploadlist .title {
    width: 700rpx;
    color: #141c31;
    font-weight: bold;
    font-size: 1.1rem;
    align-self: left;
}

.uploadlist .item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 20rpx;
    width: 650rpx;
}

.uploadlist .title view:nth-child(2) {
    color: #808080;
    font-size: 0.7rem;
    font-weight: 300;
    margin-top: 10rpx;
}

.uploadlist .item .uploadimg {
    width: 300rpx;
    height: 300rpx;
    border-radius: 5rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.uploadlist .item .uploadimg image {
    width: 120rpx;
    height: 120rpx;
}
.uploadlist .item .uploadimg .uploadtitle {
    color: #808080;
    font-size: 0.7rem;
}

.imgsbox {
    width: 690rpx;
    padding: 20rpx;
    margin: auto;
    background: #fff;
    border-radius: 0 0 14rpx 14rpx;
    border: 1px solid #d6d7dc;

    box-sizing: border-box;
    overflow: hidden;
}
.weui-cells {
    font-size: 30rpx !important;
}

.weui-cell::before {
    border-top: 1rpx solid #eee;
}
.upload-img-btn image {
    width: 185rpx;
    height: 185rpx;
}
.upload-img-btn {
    float: left;
}
.img {
    width: 185rpx;
    height: 185rpx;
    float: left;
    margin: 15rpx;
    position: relative;
    overflow: hidden;
}

.delete-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 40rpx;
    width: 100%;
}
.img image {
    width: 185rpx;
    height: 185rpx;
}

.imgx {
    width: 15rpx;
    height: 15rpx;
}
.weui-select {
    border-right: none;
}
.weui-uploader__hd {
    float: left;
}
.weui-uploader__title {
    width: 150rpx !important;
}
.weui-label {
    width: 150rpx !important;
}
.upload-img-btn image {
    margin: 10rpx;
}
</style>
